// 图表提示文档数据
const chartDocs = {
    default: {
        title: "Mermaid 图表通用提示",
        description: "Mermaid 是一个基于 Javascript 的图表绘制工具，使用简单的文本语法来创建各种图表。",
        syntax: `graph TD
    A[开始] --> B{条件}
    B -->|是| C[操作1]
    B -->|否| D[操作2]
    C --> E[结束]
    D --> E`,
        parameters: [
            { name: "方向", description: "TD (Top-Down), LR (Left-Right), BT (Bottom-Top), RL (Right-Left)" },
            { name: "节点形状", description: "[] 矩形, {} 菱形, () 圆角矩形, (()) 圆形" },
            { name: "连接线", description: "--> 实线, -.-> 虚线, ==> 粗线" }
        ],
        examples: [
            {
                title: "基本流程图",
                code: `graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作A]
    B -->|否| D[执行操作B]
    C --> E[结束]
    D --> E`
            },
            {
                title: "横向流程图",
                code: `graph LR
    A[用户输入] --> B[数据验证]
    B --> C{验证结果}
    C -->|成功| D[处理数据]
    C -->|失败| E[显示错误]
    D --> F[返回结果]
    E --> A`
            }
        ],
        tips: [
            "使用清晰的节点标签，避免过长的文本",
            "保持图表结构简单，避免过于复杂的连接",
            "使用合适的方向和布局来提高可读性",
            "可以添加样式和颜色来区分不同类型的节点"
        ]
    },
    
    flowchart: {
        title: "流程图 (Flowchart)",
        description: "流程图用于展示流程、算法或步骤的顺序关系。",
        syntax: `flowchart TD
    Start --> Stop`,
        parameters: [
            { name: "方向", description: "TD (Top-Down), LR (Left-Right), BT (Bottom-Top), RL (Right-Left)" },
            { name: "节点ID", description: "可以是字母、数字或下划线的组合" },
            { name: "节点文本", description: "显示在节点内的文本内容" }
        ],
        examples: [
            {
                title: "简单流程图",
                code: `flowchart TD
    A[开始] --> B{条件}
    B -->|是| C[操作1]
    B -->|否| D[操作2]
    C --> E[结束]
    D --> E`
            },
            {
                title: "带样式的流程图",
                code: `flowchart LR
    A[开始] --> B{判断}
    B -->|条件1| C[处理1]
    B -->|条件2| D[处理2]
    C --> E[结束]
    D --> E
    style A fill:#f9f,stroke:#333,stroke-width:2px`
            }
        ],
        tips: [
            "流程图支持更复杂的节点形状和样式",
            "可以使用 style 命令为节点添加样式",
            "支持子图(subgraph)来组织复杂的流程",
            "可以使用 click 事件添加交互功能"
        ]
    },
    
    sequenceDiagram: {
        title: "时序图 (Sequence Diagram)",
        description: "时序图用于展示对象之间的交互顺序和时间关系。",
        syntax: `sequenceDiagram
    Alice->>John: Hello John, how are you?`,
        parameters: [
            { name: "参与者", description: "定义交互的对象或角色" },
            { name: "消息类型", description: "-> 实线, --> 虚线, ->> 实心箭头, -->> 虚线箭头" },
            { name: "消息文本", description: "参与者之间传递的消息内容" }
        ],
        examples: [
            {
                title: "简单时序图",
                code: `sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!`
            },
            {
                title: "复杂时序图",
                code: `sequenceDiagram
    participant User
    participant App
    participant Database
    
    User->>App: 登录请求
    App->>Database: 验证用户
    Database-->>App: 验证结果
    alt 验证成功
        App-->>User: 登录成功
    else 验证失败
        App-->>User: 登录失败
    end`
            }
        ],
        tips: [
            "使用 participant 关键字明确定义参与者",
            "可以使用 activate 和 deactivate 显示生命周期",
            "支持 alt、opt、loop 等控制结构",
            "可以使用 note 添加注释说明"
        ]
    },
    
    classDiagram: {
        title: "类图 (Class Diagram)",
        description: "类图用于展示类之间的关系，包括继承、关联、依赖等。",
        syntax: `classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }`,
        parameters: [
            { name: "类名", description: "类的名称，通常使用大写字母开头" },
            { name: "属性", description: "+ 公有(public), - 私有(private), # 保护(protected)" },
            { name: "方法", description: "类的方法或函数" }
        ],
        examples: [
            {
                title: "简单类图",
                code: `classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
    }
    Animal <|-- Dog`
            },
            {
                title: "关联关系类图",
                code: `classDiagram
    class Student {
        +String name
        +int id
        +enroll()
    }
    class Course {
        +String title
        +String code
        +addStudent()
    }
    class Teacher {
        +String name
        +String department
        +teach()
    }
    Student "*" --> "1" Course : enrolls
    Teacher "1" --> "*" Course : teaches`
            }
        ],
        tips: [
            "使用 <|-- 表示继承关系",
            "使用 *--> 表示关联关系，可以指定多重性",
            "可以使用 composition 和 aggregation 表示组合和聚合",
            "支持接口和抽象类的定义"
        ]
    },
    
    stateDiagram: {
        title: "状态图 (State Diagram)",
        description: "状态图用于展示对象在其生命周期中的状态变化。",
        syntax: `stateDiagram-v2
    [*] --> Still`,
        parameters: [
            { name: "状态", description: "对象可能处于的状态" },
            { name: "转换", description: "状态之间的转换，通常带有触发事件" },
            { name: "初始状态", description: "[*] 表示初始状态" },
            { name: "终止状态", description: "[*] 也可以表示终止状态" }
        ],
        examples: [
            {
                title: "简单状态图",
                code: `stateDiagram-v2
    [*] --> Active
    Active --> Inactive
    Inactive --> Active
    Active --> [*]`
            },
            {
                title: "订单状态图",
                code: `stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付: 支付成功
    已支付 --> 已发货: 商家发货
    已发货 --> 已收货: 用户确认
    已收货 --> [*]
    待支付 --> 已取消: 超时未支付`
            }
        ],
        tips: [
            "使用 stateDiagram-v2 获得更好的布局",
            "可以为转换添加条件和事件",
            "支持复合状态和并发状态",
            "可以使用 note 添加状态说明"
        ]
    },
    
    gantt: {
        title: "甘特图 (Gantt Chart)",
        description: "甘特图用于展示项目进度计划，显示任务的时间安排和依赖关系。",
        syntax: `gantt
    title 项目计划
    dateFormat YYYY-MM-DD`,
        parameters: [
            { name: "标题", description: "甘特图的标题" },
            { name: "日期格式", description: "dateFormat 指定日期显示格式" },
            { name: "部分", description: "section 用于分组任务" },
            { name: "任务", description: "任务名称、状态、持续时间等" }
        ],
        examples: [
            {
                title: "简单甘特图",
                code: `gantt
    title 项目开发计划
    dateFormat YYYY-MM-DD
    section 设计阶段
    需求分析: done, des1, 2024-01-01, 7d
    系统设计: active, des2, 2024-01-08, 14d
    section 开发阶段
    前端开发: dev1, after des2, 21d
    后端开发: dev2, after des2, 21d`
            },
            {
                title: "复杂甘特图",
                code: `gantt
    title 软件开发项目
    dateFormat YYYY-MM-DD
    section 需求分析
    需求收集: done, req1, 2024-01-01, 10d
    需求评审: active, req2, after req1, 5d
    section 设计
    UI设计: ui1, after req2, 15d
    架构设计: arch1, after req2, 10d
    section 开发
    前端开发: frontend, after ui1, 30d
    后端开发: backend, after arch1, 35d
    section 测试
    单元测试: test1, after frontend, 15d
    集成测试: test2, after backend, 20d`
            }
        ],
        tips: [
            "使用 done、active、crit 等状态标识",
            "可以使用 after 指定任务依赖关系",
            "支持多种时间单位：d(天)、w(周)、m(月)",
            "可以使用 milestone 标记重要节点"
        ]
    },
    
    pie: {
        title: "饼图 (Pie Chart)",
        description: "饼图用于展示数据的占比关系，适合显示各部分占总体的比例。",
        syntax: `pie
    title 数据分布
    "数据1" : 25`,
        parameters: [
            { name: "标题", description: "pie 图的标题" },
            { name: "数据项", description: "数据名称和对应的数值" },
            { name: "数值", description: "可以是具体数值或百分比" }
        ],
        examples: [
            {
                title: "简单饼图",
                code: `pie
    title 市场份额分布
    "产品A" : 45
    "产品B" : 30
    "产品C" : 15
    "其他" : 10`
            },
            {
                title: "数据分析饼图",
                code: `pie
    title 网站流量来源
    "搜索引擎" : 45.2
    "直接访问" : 28.7
    "社交媒体" : 15.8
    "邮件营销" : 6.3
    "其他渠道" : 4.0`
            }
        ],
        tips: [
            "数据会自动计算百分比",
            "数据项的顺序会影响颜色分配",
            "适合展示 3-7 个分类的数据",
            "避免使用过长的标签名称"
        ]
    },
    
    erDiagram: {
        title: "ER图 (Entity Relationship Diagram)",
        description: "ER图用于展示实体之间的关系，常用于数据库设计。",
        syntax: `erDiagram
    CUSTOMER ||--o{ ORDER : places`,
        parameters: [
            { name: "实体", description: "数据库中的表或实体" },
            { name: "属性", description: "实体的字段或属性" },
            { name: "关系", description: "实体之间的关联关系" },
            { name: "关系类型", description: "|| 一对一, |o-- 一对多, }o-- 多对多" }
        ],
        examples: [
            {
                title: "简单ER图",
                code: `erDiagram
    CUSTOMER {
        int id PK
        string name
        string email
    }
    ORDER {
        int id PK
        int customer_id FK
        date order_date
    }
    CUSTOMER ||--o{ ORDER : places`
            },
            {
                title: "完整ER图",
                code: `erDiagram
    CUSTOMER {
        int customer_id PK
        string name
        string email
        string phone
    }
    PRODUCT {
        int product_id PK
        string name
        decimal price
        int stock
    }
    ORDER {
        int order_id PK
        int customer_id FK
        datetime order_date
        decimal total
    }
    ORDER_ITEM {
        int item_id PK
        int order_id FK
        int product_id FK
        int quantity
        decimal price
    }
    
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--o{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : included_in`
            }
        ],
        tips: [
            "使用 PK 表示主键，FK 表示外键",
            "关系类型符号：|| 一对一，|o-- 一对多，}o-- 多对多",
            "可以为关系添加描述性的标签",
            "保持实体命名的一致性和规范性"
        ]
    }
};

// 导出图表文档数据 - 确保在浏览器环境中正确挂载
// 优先检查浏览器环境
if (typeof window !== 'undefined') {
    // 浏览器环境
    window.chartDocs = chartDocs;
    console.log('ChartDocs loaded successfully in browser! Available types:', Object.keys(chartDocs));
} else if (typeof module !== 'undefined' && module.exports) {
    // Node.js 环境
    module.exports = chartDocs;
} else if (typeof globalThis !== 'undefined') {
    // 现代环境
    globalThis.chartDocs = chartDocs;
}